<template>
	<div>
	<city-header></city-header>
	<city-seach :cities='cities'></city-seach>
	<city-List :hotCities='hotCities' :cities='cities'
	:letter='letter'></city-List>
	<city-side @change='handleChange'  :cities='cities'></city-side>
</div>
</template>
<script>
 import cityHeader from './components/Header'
 import citySeach from './components/Seach'
 import cityList from './components/List'
 import citySide from './components/SideLine'
 import axios from 'axios'
	export default{
		name:'City',
		components:{
			cityHeader:cityHeader,
			citySeach:citySeach,
			cityList:cityList,
			citySide:citySide
		},
		data:function(){
			return{
				hotCities:[],
				cities:{},
				letter:''
			}
		},
		methods:{
		getInfo:function(){
		axios.get('/api/city.json').then(this.getInfoSucc)},
		getInfoSucc(res){
			res=res.data;
			if(res.ret&&res.data){
				this.hotCities=res.data.hotCities;
				this.cities=res.data.cities;
			}
		},
		handleChange:function(letter){
			this.letter=letter
		}
	},
	   //mounted 页面dom渲染完调用
		mounted:function(){
			this.getInfo();
		}
	}
</script>
<style></style>